<template>
  <div class="container">
    <nav-bar title="发布活动" />
    <div class="form">
      <div class="title">基本信息</div>
      <div class="content">
        <div class="item">
          <div class="label">活动标题</div>
          <input class="ipt" type="text">
        </div>
        <div class="item">
          <div class="label">报名截止</div>
          <input class="ipt" type="text">
        </div>
        <div class="item">
          <div class="label">选择所在城市</div>
          <input class="ipt" type="text">
        </div>
        <div class="item">
          <div class="label">详细地址</div>
          <input class="ipt" type="text">
        </div>
      </div>

      <div class="title">上传封面尺寸（推荐600&times;300）</div>
      <div class="content">
        <img class="img-preview" src='../../assets/img/pic-none.jpg' />
      </div>
      <div class="title">活动描述</div>
      <div class="content">
        <textarea class="dis"></textarea>
      </div>
      <div class="title">其他设施</div>
      <div class="content">
        <div class="item">
          <div class="label">开始时间</div>
          <input class="ipt" type="text">
        </div>
        <div class="item">
          <div class="label">结束时间</div>
          <input class="ipt" type="text">
        </div>
        <div class="item">
          <div class="label">报名费用</div>
          <input class="ipt" type="text">
        </div>
        <div class="item">
          <div class="label">所需积分</div>
          <input class="ipt" type="text">
        </div>
        <div class="item">
          <div class="label">名额限制</div>
          <input class="ipt" type="text">
        </div>
      </div>
      <div class="btn-cart">
        <div class="btn-in">活动发布</div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
export default {
  components: {
    NavBar
  }
}
</script>

<style scoped>
.form .title{
  font-size: 16px;
  line-height: 55px;
  background-color: #f0efef;
  padding-left: 25px;
}
.form .item:first-child{
  padding-top: 8px;
}
.form .content{
  padding: 0 25px;
  overflow: hidden;
  background-color: #ffffff;
}
.form .item{
  font-size: 14px;
  display: flex;
  line-height: 50px;
  height: 50px;
  justify-content: space-between;
  border-bottom: 1px solid #f0efef;
}
.form .item:last-child{
  border-bottom: none;
}
.form .content .img-preview{
  width: 150px;
  border-radius: 10px;
  margin: 15px 0;
}
.form .content .dis{
  display: block;
  width: 100%;
  height: 100px;
  border: none;
  padding: 10px 0;
}
.btn-cart{
  padding: 15px;
}
.btn-cart .btn-in{
  display: block;
  line-height: 50px;
  border-radius: 50px;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
}
</style>